<template>
  <div class="new-music">
    <!-- 标签栏 -->
    <div class="tag-wrap">
      <span :class="{active:index === currentIndex}" v-for="(item,index) in tag"
        :key="index" @click="changeTag(item,index)">{{item}}</span>
    </div>
    <!-- 歌曲列表 -->
    <table class="music-list">
      <thead>
        <th></th>
        <th></th>
        <th>音乐标题</th>
        <th>歌手</th>
        <th>专辑</th>
        <th>时长</th>
      </thead>
      <tbody>
        <tr v-for="(item,index) in divideMusicList[currentPage-1]"
          :key="item.id">
          <td>{{index+1}}</td>
          <td @click="playMusic(item.id)">
            <img :src="item.album.picUrl" alt="">
            <div class="icon-wrap"><span class="iconfont iconbofang1"></span>
            </div>
          </td>
          <td>{{item.name}} <span class="iconfont iconshipin"
              @click="playMusic(item.id)"></span></td>
          <td>{{item.artists[0].name}}</td>
          <td>{{item.album.name}}</td>
          <!-- formatTime是全局过滤器 -->
          <td>{{item.duration | formatTime}}</td>
        </tr>
      </tbody>
    </table>
    <!-- 分页器 -->
    <el-pagination v-if="newMusicList.length>0" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[5, 10,15,20]" :page-size="10"
      layout="total, sizes, prev, pager, next, jumper" :total="total"
      background>
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 标签
      tag: ['全部', '华语', '欧美', '日本', '韩国'],
      // 当前标签索引
      currentIndex: 0,
      // 最新音乐歌单请求参数
      newMusicRequest: {
        type: 0
      },
      // 歌曲数据数组
      newMusicList: [],
      // 根据每页条数将歌曲数据数组进行均分
      divideMusicList: [],
      // 显示歌曲条数
      pagesize: 10,
      // 歌曲总条数
      total: 0,
      currentPage: 1
    }
  },
  created() {
    this.getNewMusicList()
  },
  methods: {
    // 点击标签
    changeTag(item, index) {
      this.currentIndex = index
      switch (item) {
        case '全部':
          this.newMusicRequest.type = 0
          break
        case '华语':
          this.newMusicRequest.type = 7
          break
        case '欧美':
          this.newMusicRequest.type = 96
          break
        case '日本':
          this.newMusicRequest.type = 8
          break
        case '韩国':
          this.newMusicRequest.type = 16
          break
      }
      this.getNewMusicList()
    },
    // 获取最新音乐歌单数据
    async getNewMusicList() {
      const res = await this.$request('https://autumnfish.cn/top/song', {
        params: this.newMusicRequest
      })
      this.newMusicList = res.data.data
      this.total = this.newMusicList.length
      this.musicListBySize()
    },
    // 根据每页条数将歌曲数据数组进行均分，不要一个页面显示100条，加载很卡
    musicListBySize() {
      let length = this.newMusicList.length
      this.divideMusicList = []
      for (var i = 0; i < length; i += this.pagesize) {
        if (i + this.pagesize >= length) {
          this.divideMusicList.push(this.newMusicList.slice(i, length))
          return
        } else {
          this.divideMusicList.push(
            this.newMusicList.slice(i, i + this.pagesize)
          )
        }
      }
    },
    // 改变每页显示条数
    handleSizeChange(val) {
      this.currentPage = 1
      this.pagesize = val
    },
    // 改变页码
    handleCurrentChange(val) {
      this.currentPage = val
    },
    // 播放音乐
    playMusic(id) {
      this.$store.dispatch('getPlayUrl', id)
    }
  },
  watch: {
    pagesize(oldVal, newVal) {
      this.musicListBySize()
    }
  }
}
</script>

<style lang="scss" scoped>
.new-music {
  max-width: 1100px;
  margin: 0 auto;
  .tag-wrap {
    display: flex;
    justify-content: flex-end;
    span {
      margin-right: 20px;
      font-size: 15px;
      color: #808080;
      cursor: pointer;
      &.active {
        color: var(--theme-color);
      }
    }
  }
  .el-pagination {
    width: 100%;
    margin-top: 10px;
    text-align: center;
  }
  ::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: var(--theme-color); // 进行修改背景和字体
    color: #ffffff;
  }
  ::v-deep.el-pagination.is-background li:not(.disabled):hover {
    color: var(--theme-color);
  }
  ::v-deep.el-pagination__sizes .el-input .el-input__inner:hover {
    border-color: var(--theme-color);
  }
  ::v-deep.el-select .el-input__inner:focus {
    border-color: var(--theme-color);
  }
}
.music-list {
  width: 100%;
  border: 0;
  font-size: 14px;
  color: #909399;
  text-align: left;
  border-collapse: collapse;
  thead {
    th {
      padding: 12px 0;
      font-weight: 400;
    }
    th:nth-child(1) {
      width: 4.5%;
    }
    th:nth-child(2) {
      width: 12%;
    }
    th:nth-child(3) {
      width: 27%;
    }
    th:nth-child(4) {
      width: 18%;
    }
    th:nth-child(5) {
      width: 34%;
    }
    th:nth-child(6) {
      width: 4.5%;
    }
  }
  tbody {
    tr {
      box-sizing: border-box;
      height: 94px;
      padding: 12px 0;
      font-size: 14px;
      color: #606266;
      transition: background-color 0.3s;
      &:nth-child(even) {
        background-color: #fafafa;
      }
      &:hover {
        background-color: #f5f7fa;
      }
      td:nth-child(1) {
        width: 4.5%;
        padding-left: 10px;
      }
      td:nth-child(2) {
        position: relative;
        width: 12%;
        img {
          width: 70px;
          border-radius: 5px;
          cursor: pointer;
        }
        .icon-wrap {
          position: absolute;
          top: 50%;
          left: 20%;
          transform: translateY(-50%);
          width: 25px;
          height: 25px;
          line-height: 23px;
          border-radius: 50%;
          text-align: center;
          background-color: #fff;
          opacity: 0.8;
          cursor: pointer;
          transform-origin: center 50px;
          transition: transform 0.3s;
          .iconbofang1 {
            position: relative;
            left: 1px;
            color: var(--theme-color);
            font-size: 12px;
          }
        }
        &:hover {
          .icon-wrap {
            transform: scale(1.2, 1.2);
          }
        }
      }
      td:nth-child(3) {
        width: 27%;
        .iconshipin {
          font-size: 16px;
          color: var(--theme-color);
          cursor: pointer;
        }
      }
      td:nth-child(4) {
        width: 18%;
      }
      td:nth-child(5) {
        width: 34%;
      }
      td:nth-child(6) {
        width: 4.5%;
        padding-right: 10px;
      }
    }
  }
}
</style>